<template>
  <div class="container">
    <el-button @click="handleOpen">打开</el-button>
    <input type="file" @change="change"></input>
    <sliceUpload
      ref="sliceUploadRef"
      @handleProgress="handleProgress"
    ></sliceUpload>
  </div>
</template>

<script setup lang="ts" name="admin-u">
import { ref } from "vue";
import { sliceUpload } from "@components/modal/index";
interface sliceUploadRefType {
  handleShow: (params: objectType<any>) => void;
}
const sliceUploadRef = ref<sliceUploadRefType | null>(null);
const handleOpen = (file: any) => {
  if (sliceUploadRef.value) {
    sliceUploadRef.value.handleShow({
      visible: true,
      file: file,
    });
  }
};

const change = (e: any) => {
  console.log(e.target.files, "上传的数组");
  handleOpen(e.target.files[0]);
};

const handleProgress = (e: any) => {
  console.log(e, "进度回显");
};
</script>

<style lang="less" scoped>
.container {
  padding: 0px 20px;
  box-sizing: border-box;
}
</style>
